
<template>
  <div class="box"
       id="qzVisa">
    <div class="content">
      <Row type='flex'
           justify='end'
           style="padding:25px">
        <Col>
        <Button type="primary"
                @click="add"
                style="width:80px;">添加</Button>
        </Col>
      </Row>
      <div class="content_list">
        <Table stripe
               :height="this.tableHeight"
               :columns="columns7"
               class="table-list"
               :data="data6"
               :loading='loading'>
          <template slot-scope="{ row }"
                    slot="restrict">
            <span>{{row.amount?'有':'无'}}</span>
          </template>
          <template slot-scope="{ row }"
                    slot="amountVisa">
            <span>{{row.amount?row.amount:'无限'}}</span>
          </template>
          <template slot-scope="{ row,index }"
                    slot="action">
            <i class="iconsys iconedit"
               @click="uptShow(row,index)"
               title="编辑"></i>
            <Poptip confirm
                    title="你确定要删除吗？"
                    @on-ok="remove(row,index)"
                    class="poptip_del"
                    @on-cancel="cancel">
              <i class="iconsys icondel"
                 title="删除"></i>
            </Poptip>
          </template>
        </Table>
      </div>
      <div>
        <div class="content_page">
          <span>共{{totalCount}}条</span>
          <Page :total="totalCount"
                @on-change="pageNum"
                class-name="page"
                ref="pages"
                :current="objList.offset"
                :page-size="objList.limit"
                show-sizer
                @on-page-size-change="selectSize" />
        </div>
      </div>
    </div>
    <Drawer :title="title1"
            :closable="false"
            @on-close="closed"
            v-model="value1"
            width="540">
      <Form ref="formValidate"
            :model="formValidate"
            :rules="ruleValidate"
            :label-width="90"
            style="height:100%;position: relative;margin-left:45px">
        <FormItem label="角色名称:"
                  prop="juese">
          <Select v-model="formValidate.juese"
                  placeholder="请选择角色"
                  :disabled="Selectdisabled"
                  class="box_input"
                  @on-change="Select_change">
            <Option v-for="item in JSList"
                    :value="item.id"
                    :key="item.id">{{ item.roleName }}</Option>
            <!-- <Option value='店长'>店长</Option>
                    <Option value="总经理">总经理</Option>
                    <Option value="主管">主管</Option> -->
          </Select>
        </FormItem>
        <FormItem label="签赠限制:"
                  prop="xianzhi">
          <RadioGroup v-model="formValidate.xianzhi"
                      @on-change="Radio_change">
            <Radio label="YES"
                   style="margin-right:50px">有</Radio>
            <Radio label="NO">无</Radio>
          </RadioGroup>
        </FormItem>
        <FormItem label="每月签赠额:"
                  prop="zong"
                  v-if="formValidate.xianzhi === 'YES'">
          <Input :maxlength="6"
                 v-model="formValidate.zong"
                 @on-keyup="changeprice"
                 @on-blur="priceBlur"
                 placeholder="输入范围1~999999之间"
                 class="box_input"></Input>
        </FormItem>
      </Form>
      <div class="demo-drawer-footer">
        <Button @click="handleReset('formValidate')"
                style="width:72px">取消</Button>
        <Button type="primary"
                @click="handleSubmit('formValidate')"
                style="width:72px;margin-right:8px;margin-left:20px">确认</Button>
      </div>
    </Drawer>
  </div>
</template>
<script>
import { getQianzengQuery, setQianzengCreate, setQianzengDelete, setQianzengUpdate, getQianzengRole } from '@/api/setting'
export default {
  data () {
    return {
      tableHeight: 0,
      title1: '',
      loading: true,
      Selectdisabled: false,
      isDelete: true,
      objList: {
        merchantId: this.$store.state.user.merchantId,
        // shopId: '245DA5D2-3FED-44D8-91F6-58E391E67EB5',
        type: '1',
        offset: 1,
        limit: 10
      },
      objCreate: {
        merchantId: this.$store.state.user.merchantId,
        // shopId: '245DA5D2-3FED-44D8-91F6-58E391E67EB5', //商铺可不传
        authRoleId: '', // 授权人角色id
        authRoleName: '', // 授权人角色名称
        creator: this.$store.state.user.userId, // 创建人
        type: 1
      },
      page: null, // 页码 编辑完毕的时候可以用
      totalCount: null, // 总条数
      showZong: false, // 签赠总额
      value1: false, // 抽屉
      flag: false, // 调用编辑和保存方法
      id: '', // 点击编辑时候获取的cadreGiftId
      columns7: [
        {
          title: ' ',
          width: 70
        },
        {
          title: '角色名称',
          key: 'authRoleName'
        },
        {
          title: '签赠限制',
          align: 'center',
          slot: 'restrict'
        },
        {
          title: '每月签赠额',
          align: 'center',
          slot: 'amountVisa'
        },
        {
          title: '操作',
          key: 'action',
          width: 200,
          slot: 'action'
        }
      ],
      data6: [
      ],
      JSList: [],
      formValidate: {
        juese: '',
        xianzhi: 'YES',
        zong: null
        // everytime: ''
      },
      ruleValidate: {
        juese: [
          { required: true, message: '角色名称不能为空', trigger: 'change' }
        ],
        xianzhi: [
          { required: true, message: '签赠限制不能为空', trigger: 'blur' }
        ],
        zong: [
          {
            required: true,
            trigger: 'blur',
            message: '每月签赠额不能为空'
          },
          {
            required: true,
            trigger: 'blur',
            message: '输入范围1~999999之间',
            pattern: /^[1-9]\d{0,5}$/
          }
        ]
      }
    }
  },
  watch: {
    value1 (val) {
      if (val) {
        if (this.title1 === '添加签赠') {
          this.formValidate.xianzhi = 'YES'
        }
      } else {
        this.formValidate.xianzhi = 'NO'
      }
    }
  },
  mounted () {
    this.getList({ offset: 0 })
    // this.getJS()
    if (!this.hasPermission('moms:globalsetting:signing')) {
      this.$router.replace({ name: 'error_401' })
    }
  },
  methods: {
    selectSize (size) {
      this.objList.limit = size
      this.getList({ offset: 0 })
    },
    closed () {
      this.$refs.formValidate.resetFields()
    },
    changeprice () {
      this.formValidate.zong = this.formValidate.zong.replace(/[^\d]/g, '').replace(/^0{1,}/g, '')
    },
    // 获取角色列表
    getJS () {
      getQianzengRole({
        'merchantId': this.$store.state.user.merchantId,
        'status': '1'
      }).then((res) => {
        if (res.data.status === 200) {
          this.JSList = res.data.data
        } else {
          this.$Message.error(`${res.data.error}`)
        }
      })
    },
    priceBlur () {
      this.formValidate.zong = this.formValidate.zong.replace(/[^\d]/g, '').replace(/^0{1,}/g, '')
    },
    Select_change (value) {
      this.JSList.forEach((ele) => {
        if (ele.id === value) {
          let str = ele.roleName
          this.objCreate.authRoleName = str
        }
      })
      this.objCreate.authRoleId = value
    },
    Radio_change (a) {
      if (a === 'YES') {
        this.showZong = true
      } else {
        this.showZong = false
        this.formValidate.zong = null
      }
    },
    add () {
      // this.title1 = '添加签赠'
      // this.value1 = true
      // this.showZong = false
      // this.flag = false
      // this.Selectdisabled = false
      this.getJS()
      this.title1 = '添加签赠'
      this.formValidate.juese = ''
      // this.formValidate.xianzhi = ''
      this.formValidate.zong = ''
      this.value1 = true
      this.showZong = false
      this.flag = false
      this.Selectdisabled = false
    },
    pageNum (page) {
      this.page = page
      this.getList({ offset: (page - 1) * this.objList.limit })
    },
    uptShow (row, index) { // 编辑
      getQianzengRole({
        'merchantId': this.$store.state.user.merchantId,
        'status': ''
      }).then((res) => {
        if (res.data.status === 200) {
          this.JSList = res.data.data
        } else {
          this.$Message.error(`${res.data.error}`)
        }
      })
      this.title1 = '编辑签赠'
      this.Selectdisabled = true
      this.flag = true // 调用编辑的方法
      this.value1 = true
      this.formValidate.juese = row.authRoleId
      // this.formValidate.juese = row.name
      this.id = row.cadreGiftId
      this.objCreate.authRoleName = row.authRoleName
      this.objCreate.authRoleId = row.authRoleId
      if (!row.amount) {
        this.formValidate.xianzhi = 'NO'
        this.showZong = false
        this.formValidate.zong = ''
      } else {
        this.formValidate.xianzhi = 'YES'
        this.formValidate.zong = String(row.amount)
        this.showZong = true
      }
    },
    remove (row, index) { // 删除
      if (this.isDelete) {
        if (!this.isDelete) {
          return
        }
        this.isDelete = false
        if (this.$refs.pages.currentPage !== 1) {
          if (this.totalCount % this.objList.limit === 1) {
            this.$refs.pages.currentPage = this.$refs.pages.currentPage - 1
          }
        }
        setTimeout(() => {
          setQianzengDelete({
            'cadreGiftId': row.cadreGiftId,
            'merchantId': this.$store.state.user.merchantId,
            // 'shopId': '245DA5D2-3FED-44D8-91F6-58E391E67EB5',
            'type': '1'
          }).then((res) => {
            this.isDelete = true
            if (res.data.status === 200) {
              this.$Message.success('删除成功')
              this.getList({ offset: (this.$refs.pages.currentPage - 1) * this.objList.limit })
            } else {
              this.$Message.error(`${res.data.error}`)
            }
          })
        }, 200)
      }
      // this.data6.splice(index, 1)
    },
    cancel () {
    },
    handleSubmit (name) {
      this.$refs[name].validate((valid) => {
        if (valid) {
          if (this.flag) { // 存在即调用编辑的方法
            if (!this.formValidate.zong) {
              this.formValidate.zong = 0
            }
            setQianzengUpdate({
              'cadreGiftId': this.id,
              'authRoleId': this.objCreate.authRoleId,
              'authRoleName': this.objCreate.authRoleName,
              'merchantId': this.$store.state.user.merchantId,
              'type': '1',
              'amount': this.formValidate.zong
            }).then((res) => {
              if (res.data.status === 200) {
                this.$refs.formValidate.resetFields()
                this.value1 = false
                this.$Message.success('编辑成功')
                this.getList({ offset: (this.page - 1) * 10 })
              } else {
                this.$Message.error(`${res.data.error}`)
              }
            })
          } else { // 不存在即调用 新增的方法
            // this.objCreate.authRoleId = this.getGUid()
            this.flag = false
            if (!this.formValidate.zong) {
              this.formValidate.zong = 0
            }
            setQianzengCreate({ // 添加
              ...this.objCreate, 'amount': this.formValidate.zong
            }).then((res) => {
              if (res.data.status === 200) {
                this.$refs.pages.currentPage = 1
                this.getList({ offset: 0 })
                this.$Message.success('新增成功')
                this.$refs.formValidate.resetFields()
                this.value1 = false
              } else {
                this.$Message.error(`${res.data.error}`)
              }
            })
          }
        }
      })
    },
    handleReset (name) {
      this.value1 = false
      this.$refs.formValidate.resetFields()
    },
    getList (obj1) { // 初始化的列表
      this.loading = true
      this.tableHeight = 0
      getQianzengQuery({
        ...this.objList, offset: (this.objList.offset - 1) * 10, ...obj1
      }).then((res) => {
        if (res.data.status === 200) {
          this.loading = false
          this.totalCount = res.data.totalCount
          this.data6 = res.data.data
          if (res.data.data && res.data.data.length >= 10) {
            this.tableHeight = 520
          }
          getQianzengRole({
            'merchantId': this.$store.state.user.merchantId,
            'status': '1'
          }).then((red) => {
            if (red.data.status === 200) {
              this.data6.forEach(ele => {
                red.data.data.forEach(elt => {
                  if (ele.authRoleId === elt.id) {
                    ele.authRoleName = elt.roleName
                  }
                })
              })
            } else {
              this.$Message.error(`${red.data.error}`)
            }
          })
        } else {
          this.loading = false
          this.$Message.error(`${res.data.error}`)
        }
      })
    }
  }

}
</script>
<style lang="less" scoped>
.box {
  .content_page {
    height: 80px;
    line-height: 80px;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    .page {
      margin-left: 2%;
    }
  }
}
</style>
<style>
.box_input {
  width: 280px;
}
.demo-drawer-footer {
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  border-top: 1px solid #e8e8e8;
  padding: 10px 16px;
  text-align: right;
  background: #fff;
}
#qzVisa .ivu-poptip-confirm .ivu-poptip-body .ivu-icon {
  left: 15px;
}
</style>
